<template>
    <div class="left-panel">
        <div class="panel-title">已配置组合计划方案</div>

        <div class="panel-content">
            <vue-scroll :ops="$root.scrollOpsY">
                <div class="item-row" v-for="(item,index) in dataList">
                    <span>{{ index + 1 }}</span>
                    <span>{{ item.name }}</span>
                    <span>
                        <img class="is_hover" v-if="index!==0" src="../../../assets/images/zzjhpz/icon_arrows_top.png" alt="" />
                        <img v-if="index===0" src="../../../assets/images/zzjhpz/icon_arrows_top_gray.png" alt="" />
                        <img class="is_hover" v-if="index!==dataList.length-1" src="../../../assets/images/zzjhpz/icon_arrows_bottom.png" alt="" />
                        <img v-if="index===dataList.length-1" src="../../../assets/images/zzjhpz/icon_arrows_bottom_gray.png" alt="" />
                    </span>
                    <span class="is_hover">查看</span>
                    <span class="is_hover">修改</span>
                </div>
            </vue-scroll>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                dataList: [
                    { name: '组合1', },
                    { name: '组合1', },
                    { name: '组合1', },
                    { name: '组合1', },
                    { name: '组合1', },
                    { name: '组合1', },
                    { name: '组合1', },
                    { name: '组合1', },
                    { name: '组合1', },
                    { name: '组合1', },
                    { name: '组合1', },
                    { name: '组合1', },
                ],
            }
        },
        methods: {

        },
        mounted() {

        }
    }
</script>

<style lang="less" scoped>
    .left-panel {
        width: 100%;
        height: 100%;
        background: #FFFFFF;
        border-radius: 8px;
        padding: 40px;
        box-sizing: border-box;

        >.panel-title {
            margin-bottom: 15px;
        }

        >.panel-content {
            width: 100%;
            height: calc( 100% - 43px );

            .item-row {
                display: flex;
                width: 100%;
                height: 48px;
                line-height: 46px;
                border-top: 1px solid #EEEFF2;
                box-sizing: border-box;
                padding: 0 12px;

                &:last-child {
                    border-bottom: 1px solid #EEEFF2;
                }

                >span {
                    flex: 1;
                    font-size: 14px;

                    &:nth-of-type( 1 ) {
                        flex: 0.5;
                    }

                    &:nth-of-type( 2 ) {
                        flex: 1.6;
                    }

                    &:nth-of-type( 3 ) {

                        img {
                            margin-right: 5px;
                        }
                    }

                    &:nth-of-type( 4 ) {
                        flex: 0.5;
                        color: #2C50EE;
                    }

                    &:nth-of-type( 5 ) {
                        flex: 0.5;
                        color: #2C50EE;
                    }
                }
            }
        }
    }
</style>
